<template>
  <div style="width: 50%">
    <!-- {{ruleForm}} -->
    <h2>产品编辑</h2>
    <br />
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="产品编号" prop="productCode">
            <el-input v-model="ruleForm.productCode" disabled></el-input>
          </el-form-item>

          <el-form-item label="产品名称" prop="productName">
            <el-input v-model="ruleForm.productName"></el-input>
          </el-form-item>

          <el-form-item label="厂商编码" prop="factoryNo">
            <el-input v-model="ruleForm.factoryNo"></el-input>
          </el-form-item>

          <el-form-item label="内部编码" prop="innerNo">
            <el-input v-model="ruleForm.innerNo"></el-input>
          </el-form-item>

          <el-form-item label="规格" prop="specs">
            <el-input v-model="ruleForm.specs"></el-input>
          </el-form-item>

          <el-form-item label="类别" prop="productTypeId">
            <el-select v-model="ruleForm.productTypeId" placeholder="请选择">
              <el-option :value="1" label="移动电源">移动电源 </el-option>
              <el-option :value="2" label="线材类">线材类 </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="存储单位" prop="unit">
            <el-select v-model="ruleForm.unit" placeholder="请选择">
              <el-option v-for="item in options3" :key="item.id" :label="item.unitName" :value="item.unitName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预警(下)" prop="floor">
            <el-input v-model="ruleForm.floor"></el-input>
          </el-form-item>
          <el-form-item label="预警(上)" prop="ceiling">
            <el-input v-model="ruleForm.ceiling"></el-input>
          </el-form-item>

          <el-form-item label="库存数" prop="inventory">
            <el-input v-model="ruleForm.inventory"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="包装类型" prop="packageType">
            <el-input v-model="ruleForm.packageType"></el-input>
          </el-form-item>

          <el-form-item label="价格" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
          </el-form-item>

          <el-form-item label="仓库" prop="defaultWarehouseId">
            <el-select v-model="ruleForm.defaultWarehouseId" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="库位" prop="defaultLocationId">
            <el-select v-model="ruleForm.defaultLocationId" placeholder="请选择">
              <el-option v-for="item in options1" :key="item.id" :label="item.locationName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="客户" prop="defaultCustomId">
            <el-select v-model="ruleForm.defaultCustomId" placeholder="请选择">
              <el-option v-for="item in options2" :key="item.id" :label="item.customName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="重量" prop="weight">
            <el-input v-model="ruleForm.weight"></el-input>
          </el-form-item>

          <el-form-item label="默认供应商" prop="defaultSupplierId">
            <el-select v-model="ruleForm.defaultSupplierId" placeholder="请选择">
              <el-option :value="false" label="小米科技">小米科技 </el-option>
              <el-option :value="true" label="华为科技">华为科技 </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="描述" prop="describe">
            <el-input type="textarea" v-model="ruleForm.describe"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="warning" @click="submitForm('ruleForm')">编辑</el-button>
        <el-button @click="FH()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  ProductManagementUpdate,
  GetProductManagementById,
  BindWarehouse,
  BindLocation,
  BindCustom,
  BindUnit,
} from "@/api/BasicsDatumServer/ProductManagement";
export default {
  data() {
    return {
      ruleForm: {},
      options: [],
      options1: [],
      options2: [],
      options3: [],
      rules: {
        productCode: [
          { required: true, message: "请输入产品编号", trigger: "blur" },
        ],
        productName: [
          { required: true, message: "请输产品名称", trigger: "blur" },
        ],
        factoryNo: [
          { required: true, message: "请输入商品编码", trigger: "blur" },
        ],
        innerNo: [
          { required: true, message: "请输入内部编码", trigger: "blur" },
        ],
        specs: [{ required: true, message: "请输入规格", trigger: "blur" }],
        productTypeId: [
          { required: true, message: "请输入类别", trigger: "blur" },
        ],
        unit: [{ required: true, message: "请输入存储单位", trigger: "blur" }],
        floor: [{ required: true, message: "请输入预警(下)", trigger: "blur" }],
        ceiling: [
          { required: true, message: "请输入预警(上)", trigger: "blur" },
        ],
        inventory: [
          { required: true, message: "请输入库存数", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        weight: [{ required: true, message: "请输入重量", trigger: "blur" }],
        defaultSupplierId: [
          { required: true, message: "请输入默认供应商", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.GetProductManagementById();
    this.BindWarehouse();
    this.BindLocation();
    this.BindCustom();
    this.BindUnit();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //修改
          ProductManagementUpdate(this.ruleForm).then((res) => {
            if (res.data.data > 0) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.$router.push("ProductManagementList");
            } else {
              this.$message({
                message: "修改失败",
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    FH() {
      this.$router.push("ProductManagementList");
    },
    //加载仓库
    BindWarehouse() {
      BindWarehouse().then((res) => {
        this.options = res.data.data;
      });
    },
    //加载库位
    BindLocation() {
      BindLocation().then((res) => {
        this.options1 = res.data.data;
      });
    },
    //加载客户
    BindCustom() {
      BindCustom().then((res) => {
        this.options2 = res.data.data;
      });
    },
    //加载单位
    BindUnit() {
      BindUnit().then((res) => {
        this.options3 = res.data.data;
      });
    },
    GetProductManagementById() {
      var myparms = {
        id: this.$route.query.id,
      };
      GetProductManagementById(myparms).then((res) => {
        console.log(111111111111, res.data);
        this.ruleForm = res.data.data;
      });
    },
  },
};
</script>

<style></style>